<script setup>
  import { RouterView } from 'vue-router'
  import sider from './components/sider.vue'
  import navigation from './components/navigation.vue'
  import { ref, watch } from 'vue'
  import router from '@/router'

  const contentHeight = ref(window.innerHeight - 62)
  const contentWidth = ref(window.innerWidth - 200)
  window.addEventListener('resize', () => {
    contentHeight.value = window.innerHeight - 62
    contentWidth.value = window.innerWidth - 200
  })

  const meta = ref()

  watch(
    () => router.currentRoute.value,
    (route) => {
      meta.value = route.meta
    },
    { immediate: true }
  )
</script>

<template>
  <Layout>
    <Sider :width="200" style="minheight: 100vh">
      <sider />
    </Sider>
    <Layout>
      <navigation :width="contentWidth" />
      <div
        style="background: white; margin-top: 10px; padding: 20px"
        :style="{ height: contentHeight + 'px', width: contentWidth + 'px' }">
        <RouterView v-slot="{ Component }" :key="meta.name">
          <component :is="Component" v-if="!meta.keep" :key="meta.name" />
          <KeepAlive>
            <component :is="Component" v-if="meta.keep" :key="meta.name" />
          </KeepAlive>
        </RouterView>
      </div>
    </Layout>
  </Layout>
</template>

<style scoped lang="scss">
  @import url('@/assets/css/sider.scss');
</style>
